<template>
  <div class="fullpage-container" ref="container" @wheel.passive="onWheel">
    <section v-for="(s, i) in sections" :key="i" class="fullpage-section" :id="s.id">
      <component :is="s.comp" />
    </section>
  </div>
  
</template>

<script setup>
const props = defineProps({
  sections: { type: Array, required: true }
})

const container = ref(null)
let isScrolling = false

const scrollToIndex = (index) => {
  const el = container.value
  if (!el) return
  const maxIndex = (el.children?.length || 1) - 1
  const i = Math.max(0, Math.min(index, maxIndex))
  isScrolling = true
  el.scrollTo({ left: i * window.innerWidth, behavior: 'smooth' })
  setTimeout(() => (isScrolling = false), 800)
}

const getCurrentIndex = () => {
  const el = container.value
  if (!el) return 0
  return Math.round(el.scrollLeft / window.innerWidth)
}

const onWheel = (e) => {
  if (isScrolling) return
  const current = getCurrentIndex()
  if (e.deltaY > 0) {
    scrollToIndex(current + 1)
  } else if (e.deltaY < 0) {
    scrollToIndex(current - 1)
  }
}
</script>

<style scoped>
.fullpage-container {
  height: calc(100vh - 80px);
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  display: flex;
  flex-direction: row;
  overscroll-behavior: contain;
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none;    /* Firefox */
}
.fullpage-container::-webkit-scrollbar { /* Chrome/Safari */
  display: none;
}
.fullpage-section {
  height: 100%;
  width: 100vw;
  flex: 0 0 100vw;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 屏内不出现滚动条 */
}
</style>


